<template>
  <ul class="sub-category">
    <li
    v-for="sub in subs"
    :key="sub.id"
    is='router-link'
    :to="{path: '/list', query: {url: sub.url}}"
    tag="li"
    >
    <img :src="sub.imageUrl" alt="">
    <span>{{sub.title}}</span>
    </li>
  </ul>
</template>

<script>
import { getSubCategories } from '@/api/category'
export default {
  name: 'SubCategory',
  data () {
    return {
      subs: []
    }
  },
  created () {
    console.log(this)
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      getSubCategories(to.params.id)
        .then(res => {
          console.log(res)
          vm.subs = res
        })
    })
  },
  beforeRouteUpdate (to, from, next) {
    console.log('before route update')
    getSubCategories(to.params.id)
      .then(res => {
        console.log(res)
        this.subs = res
      })
    next()
  }
}
</script>

<style lang="scss" scoped>
    .sub-category{
        display: flex;
        flex-wrap: wrap;
        li{
            width: 48%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
</style>
